<template>
    <div class="container-header-top-right">
        <el-icon title="搜索">
            <component :is="'Search'"></component>
        </el-icon>
        <el-badge is-dot class="item" :offset="[-10, 0]">
            <el-icon title="消息">
                <component :is="'Message'"></component>
            </el-icon>
        </el-badge>
        <el-icon :title="isFullscreen ? '取消全屏' : '全屏'" @click="toggleFullScreen">
            <component :is="isFullscreen ? 'Crop' : 'FullScreen'"></component>
        </el-icon>
        <!-- 全屏按钮 -->
        <el-icon title="设置">
            <component :is="'Setting'" @click="drawer2 = true"></component>
        </el-icon>
        <el-dropdown placement="bottom-end">
            <div>
                <el-avatar :size="40">
                    <img :src="sysConfig.userInfo.avatar ? sysConfig.userInfo.avatar : '../src/assets/avatar.png'"
                        alt="avatar">
                </el-avatar>
            </div>
            <template #dropdown>
                <el-dropdown-menu>
                    <div class="userinfo-panel">
                        <el-avatar :size="40">
                            <img :src="sysConfig.userInfo.avatar ? sysConfig.userInfo.avatar : avatarPath"
                                alt="avatar">
                        </el-avatar>
                        <!-- <span class="text-large font-600 mr-3"> 登录账号： </span> -->
                        <span class="text-sm mr-2" style="color: var(--el-text-color-regular)">
                            {{ sysConfig.userInfo.userName }}
                        </span>
                    </div>
                    <el-dropdown-item icon="Operation" divided @click="goPersonCenter">个人中心</el-dropdown-item>
                    <el-dropdown-item icon="SwitchButton" divided @click="logout">退出系统</el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
    </div>

    <el-drawer v-model="drawer2" :direction="direction">
        <template #header>
            <h4>系统设置</h4>
        </template>
        <template #default>
            <div>内容123</div>
        </template>
        <template #footer>
            <div style="flex: auto">
                <el-button @click="cancelClick">取消</el-button>
                <el-button type="primary" @click="confirmClick">保存</el-button>
            </div>
        </template>
    </el-drawer>
</template>

<script setup>
import screenfull from "screenfull";
import { ref, onMounted, onUnmounted } from "vue"
import { useRouter } from "vue-router"
import { get } from '@/utils/request'
import { useSysConfigStore } from "@/stores/sysConfig"

const router = useRouter()
const sysConfig = useSysConfigStore()

const avatarPath = new URL('@/assets/avatar.png',import.meta.url).href
const isFullscreen = ref(false)
const drawer2 = ref(false)
const direction = ref()
// const { tags, routerList, userInfo, roleList, permissionList } = storeToRefs(sysConfig)

const change = () => {
    isFullscreen.value = screenfull.isFullscreen
};

const toggleFullScreen = () => {
    screenfull.toggle();
};

function goPersonCenter() {
    router.push("/sys/personCenter");
}

function logout() {
    ElMessageBox.confirm(
        '是否退出当前登录账号?',
        '退出登录',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(async () => {
        const loadingInstance = ElLoading.service({
            fullscreen: true,
            lock: true,
            background: 'rgba(0, 0, 0, 0.7)',
            text: '正在注销......'
        })
        try {
            const res = await get('/logout');
            let timer = setTimeout(() => {
                loadingInstance.close();
                clearInfo()
                clearTimeout(timer);
            }, 200);
        } catch (error) {
            console.error(error);
        }
    }).catch((error) => {
        console.log(error)
    });
}

function clearInfo() {
    //清空token
    localStorage.removeItem('pangu-authorization-token')
    //清空pinia中tags数据
    sysConfig.tags = []
    //清空路由信息,排除主页路径，避免切换用户后主页路由404
    sysConfig.routerList.forEach(item => {
        item.path != '/home' && router.hasRoute(item.componentName) && router.removeRoute(item.componentName)
    })
    //清空用户信息
    sysConfig.userInfo = {}
    //清空用户角色信息
    sysConfig.roleList = []
    //清空用户权限信息
    sysConfig.permissionList = []
    //清空动态路由表数据
    sysConfig.routerList = []
    //跳转到登录页面
    router.replace('/login')
}

function cancelClick() { }

function confirmClick() { }

onMounted(() => {
    screenfull.on("change", change);
});

onUnmounted(() => {
    screenfull.off("change", change);
});
</script>

<style lang="less" scoped>
.container-header-top-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;

    .el-avatar {
        margin-left: 10px;
        cursor: pointer;
    }

    .el-icon {
        font-size: 20px;
        margin-right: 12px;
        margin-left: 12px;
        cursor: pointer;
    }

    .el-icon :hover {
        background-color: azure;
    }
}

.userinfo-panel {
    min-width: 160px;
    height: 40px;
    font-size: 15px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 10px;

    .el-avatar {
        margin-right: 10px;
        margin-left: 10px;
    }
}
</style>
